<template>
    <div>
        <!-- 搜索区 -->
        <el-form :inline="true" size="small" ref="form" label-width="80px" >
            <el-form-item>
                <el-button size="small" type="primary" @click="addHandler">添加</el-button>
            </el-form-item>
            <el-form-item >
                <el-input v-model="params.username" placeholder="请输入用户名" clearable></el-input>
            </el-form-item>
            <el-form-item >
                <el-select v-model="params.rolename" placeholder="请选择角色" clearable>
                    <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="users.list" style="width: 100%">
            <el-table-column type="index" label="序号" width="80"> </el-table-column>
            <el-table-column prop="username" label="用户名"> </el-table-column>
            <el-table-column prop="realname" label="姓名"> </el-table-column>
            <el-table-column prop="roles[0].name" label="角色"> </el-table-column>
            <el-table-column prop="gender" label="性别"> </el-table-column>
            <el-table-column prop="birth" label="生日" width="180">
                <template slot-scope="scope">
                    {{scope.row.birth | dateFormat}}
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态"> </el-table-column>
            <el-table-column prop="telephone" label="手机号"> </el-table-column>
            <el-table-column prop="address" label="操作"> 
                <template slot-scope="scope">
                    <i class="el-icon-setting" @click="setHandler(scope.row)"></i>
                    <i class="el-icon-delete" @click="deleteHandler(scope.row.id)"></i>
                    <i class="el-icon-share" @click="detailsHandler(scope.row)"></i>
                    <i class="el-icon-edit" @click="editHandler(scope.row)"></i>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            layout="total, prev, pager, next"
            @current-change="pageHandler"
            :page-size="users.pageSize"
            :current-page="users.page"
            :total="users.total">
        </el-pagination>

        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            {{form}}
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.realname"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                        <el-radio label="male" value="male">男</el-radio>
                        <el-radio label="female" value="female">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.telephone"></el-input>
                </el-form-item>
                <el-form-item label="出生日期">
                    <el-date-picker v-model="form.birth" type="date" placeholder="选择日期"> </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHandler">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 设置角色 -->
        <el-dialog title="设置角色" :visible.sync="setDialogVisible" width="50%">
            <el-form ref="form" :model="setForm" label-width="80px">
                <el-form-item label="用户名">
                    <div>{{user_row.username}}</div>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-select v-model="setForm.roles" placeholder="请选择角色" clearable>
                        <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveSetHandler">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import qs from 'qs'
export default {
    data() {
        return {
            params: {
                page: 1,
                pageSize: 5
            },
            // 用户
            users:[],
            // 角色
            roles:'',
            dialogVisible: false,
            title: "",
            form: {
                gender:"male"
            },
            setForm: {},
            setDialogVisible: false,
            user_row:{}
        }
    },
    created() {
        // 分页查询用户
        this.queryUsers(this.params)

        // 查询所有角色
        this.findAllRoles()
    },
    watch: {
        // 监听页码的改变
        params: {
            handler: function() {
                this.queryUsers(this.params)
            },
            deep: true
        }
    },
    methods: {
        // 设置
        setHandler(row) {
            this.setDialogVisible = true
            this.user_row = row;
            row.roles[0].roles = row.roles[0].id
            this.setForm = Object.assign({},row.roles[0])
        },

        // 保存设置
        saveSetHandler() {
            this.setForm.id = this.user_row.id
            this.axios.post("/baseUser/setRoles",qs.stringify(this.setForm)).then(res => {
                this.setDialogVisible = false
                this.queryUsers(this.params)
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
            })
        },
        //  删除
        deleteHandler(id) {
            this.axios.get("/baseUser/deleteById",{params: {id}}).then(res => {
                if(res.data.status == 200) {
                    this.queryUsers(this.params)
                    this.$notify({
                        title: '成功',
                        message: res.data.message,
                        type: 'success'
                    });
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: res.data.message
                    });
                }
            })

        },

        // 保存
        saveHandler() {
            this.form.birth = this.form.birth.valueOf()
            // this.form.birth = this.form.birth.getTime()
            // this.form.birth = Date.parse(this.form.birth)
            this.axios.post("/baseUser/saveOrUpdate",qs.stringify(this.form)).then(res => {
                this.dialogVisible = false;
                this.queryUsers(this.params);
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
            })
        },

        // 添加
        addHandler() {
            this.dialogVisible = true;
            this.title = "添加用户信息"
            this.form = {}
            this.form.gender = 'male'
        },

        // 详情
        detailsHandler(row) {
            console.log(row)
            this.$router.push({path: '/role/user_details',query: {row:JSON.stringify(row)}})
        },

        // 修改
        editHandler(row) {
            this.dialogVisible = true;
            this.title = "修改用户信息"
            this.form = row
        },

        // 查询所有角色
        findAllRoles() {
            this.axios.get("/role/findAll").then(res => {
                this.roles = res.data.data
            })
        },
        
        // 分页
        pageHandler(page) {
            this.params.page = page
        },
        
        // 分页查询所有
        queryUsers() {
            this.axios.get("/baseUser/pageQuery",{params: this.params}).then(res => {
                this.users = res.data.data
            })
        }
    }
}
</script>

<style>
    i {
        margin-right: .3rem;
    }
</style>